<template>
  <CustomEcharts :id="props.id" height="600px" width="1400px" :full-options="echartsOptions" :loading="false">
  </CustomEcharts>
</template>

<script setup>
// 引进Echarts 组件
import { onMounted, reactive, defineProps, watch } from "vue";
import CustomEcharts from './customEcharts.vue';
import * as echarts from 'echarts';

const props = defineProps({
  echartsData: Object,
});
const echartsOptions = reactive({
  options: {},
  init: false
});
const testOption = (data, dimensions) => {
  let series = [];
  let colorArr=['#3B7EF7','#96E2C5'];
  props.echartsData.series.forEach((element,index) => {
    series.push({
      name: element.name ? element.name : props.echartsData.name,
      type: "bar",
      barWidth: '16px',
      itemStyle: {
        normal: {
          color:colorArr[index]

        },
      },
      data: element.data,
    })
  });

  const option = {
    legend: {show:true, right: '1%',top:"0%"},
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "4%",
      right: "5%",
      bottom: 0,
      top: "12%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: true, //坐标轴两边留白
      data: props.echartsData.xaxis ? props.echartsData.xaxis : [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
      ],
      axisLabel: {
        //坐标轴刻度标签的相关设置。
        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
        rotate: 45,
        //	margin:15,
        textStyle: {
          color: "#86909C",
          fontStyle: "normal",
          fontFamily: "微软雅黑",
          fontSize: 16,
        },
      },
      axisTick: {
        //坐标轴刻度相关设置。
        show: false,
      },
      axisLine: {
        show: true,

        //坐标轴轴线相关设置
        lineStyle: {
          color: "#86909C",
        },
      },
      splitLine: {
        //坐标轴在 grid 区域中的分隔线。
        show: true,
        lineStyle: {
          color: "#ffffff1f",
          opacity: 0,
        },
      },
    },
    yAxis: [
      {

        type: "value",
        // name: props.echartsData.unit?props.echartsData.unit:"元",
        nameLocation: 'end',
        position: 'left',
        splitNumber: 5,
        min: 0,
        // max: Math.max(...props.echartsData.series[0].data),
        nameTextStyle: {
          color: "#C9CDD4", //颜色
          padding: [0, 0, 0, 0], //间距分别是 上 右 下 左
        },
        axisLabel: {

          textStyle: {
            color: "#86909C",
            fontStyle: "normal",
            fontFamily: "微软雅黑",
            fontSize: 16,
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#C9CDD4'
          }
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#ECF0F5",
            type: "dashed",
          },
        },
      },
     
    ],
    series: series
  
  };
  return option;
}
// 此处可请求接口来获取数据
// 我的options配置使用的是dataset的形式，传进options中的两个参数data（图表的数据）和dimension（图表的维度），
onMounted(() => {
  const testData = [];
  const testDimensions = ['name', 'value'];
  echartsOptions.options = testOption(testData, testDimensions);
});
</script>